<template>
  <ContentField>
    <!-- 对局信息 -->
    <div class="card-body">
      <table class="table table-striped table-hover">
        <thead>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>对战结果</td>
          <td>对战时间</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="record in records" :key="record.record.id">
          <td>
            <img :src="record.a_photo" alt="照片" class="user_photo">
            &nbsp;
            <span>{{ record.a_name }}</span>
          </td>
          <td>
            <img :src="record.b_photo" alt="照片" class="user_photo">
            &nbsp;
            <span>{{ record.b_name }}</span>
          </td>
          <td>
            <span>{{ record.result }}</span>
          </td>
          <td>
            <span>{{ record.record.createTime }}</span>
          </td>
          <td>
            <button @click="open_record_content(record.record.id)" type="button" class="btn btn-primary">查看录像</button>
          </td>
        </tr>
        </tbody>
      </table>
      <!--内容分页-->
      <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center">
          <li class="page-item" @click="click_page(-2)">
            <a class="page-link" href="#" aria-label="Previous">
              <span aria-hidden="true">&laquo;</span>
            </a>
          </li>
          <li :class="'page-item ' + page.is_active" v-for="page of pages" :key="page.number"
              @click="click_page(page.number)">
            <a class="page-link" href="#">{{ page.number }}</a>
          </li>
          <li class="page-item" @click="click_page(-1)">
            <a class="page-link" href="#" aria-label="Next">
              <span aria-hidden="true">&raquo;</span>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </ContentField>
</template>

<script>
import ContentField from "@/components/ContentField";
import $ from 'jquery';
import {useStore} from 'vuex';
import {ref} from 'vue';
import router from '@/router/index';

export default {
  name: "RecordIndexView",
  components: {
    ContentField
  }, setup() {

    let store = new useStore();
    let records = ref([]);          //存储数据
    let current_page = 1;           //当前页
    let total_records = 0;          //总数据
    let pages = ref([]);            //页面展示数据

    //获取当前分页要展示的数字
    const click_page = (number) => {
      if (number === -1) number = current_page + 1;
      else if (number === -2) number = current_page - 1;

      //覆盖原页面
      let total_page = parseInt(Math.ceil(total_records / 10));
      if (number >= 1 && number <= total_page) {
        current_page = number;
        refresh_records(current_page);
      }
    }

    //获取分页展示的数字
    const update_page = () => {
      let total_page = parseInt(Math.ceil(total_records / 10));
      let new_pages = [];
      for (let i = current_page - 2; i <= current_page + 2; i++) {
        if (i >= 1 && i <= total_page)
          new_pages.push({
            number: i,
            is_active: i === current_page ? 'active' : ''
          })
      }
      pages.value = new_pages;
    }

    //获取record对局列表
    const refresh_records = (page) => {
      $.ajax({
        url: '/api/record/getList/',
        type: 'get',
        data: {
          page: page
        },
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        success(resp) {
          records.value = resp.records;         //返回的数据也是列表,所以直接赋值
          total_records = resp.records_total;
          update_page();                        //更新页面有几页数据
          // console.log(records.value);
        }, error(resp) {
          console.log(resp);
        }
      })
    }
    //刷新首页
    refresh_records(current_page);


    //将字符串[一维]转换成地图[二维]
    const stringTo2D = map => {
      let g = [];
      for (let i = 0, k = 0; i < 13; i++) {
        let line = [];
        for (let j = 0; j < 14; j++, k++) {
          if (map[k] == 0) line.push(0);
          else line.push(1);
        }
        g.push(line);
      }
      return g;
    }

    //直播录像的设置
    const open_record_content = recordId => {
      //把从后端发过来的records遍历(看谁的id和recordId相同)
      for (const record of records.value) {
        if (record.record.id === recordId) {
          //更新 record.js 中的数据
          store.commit("updateIsRecord", true);
          store.commit("updateSteps", {
            a_steps: record.record.asteps,
            b_steps: record.record.bsteps
          });
          store.commit("updateRecordLoser", record.record.loser);

          //地图 pk.js 中的地图与玩家A、B信息
          store.commit("updateGame", {
            map: stringTo2D(record.record.map),
            a_id: record.record.aid,
            a_sx: record.record.asx,
            a_sy: record.record.asy,
            b_id: record.record.bid,
            b_sx: record.record.bsx,
            b_sy: record.record.bsy
          });

          //路由跳转
          router.push({
            name: "record_content",
            params: {
              recordId: recordId
            }
          })
          break;          //打破循环
        }
      }
    }

    return {
      refresh_records,
      total_records,
      current_page,
      records,
      open_record_content,
      update_page,
      click_page,
      pages
    }
  }
}
</script>

<style scoped>
img.user_photo {
  border-radius: 50%;
  width: 7vh;
}

div {
  text-align: center;
}
</style>